<template>
  <div>
    <el-form :model="formData" :rules="formRules" inline ref="formData" label-position="top" class="row-form">
      <el-card class="box-card">
        <div class="card-view">

          <div class="card-title">基础信息</div>

          <el-form-item label="园区导入" prop="indexImage" class="form-item-css">
            <div slot="label" class="row-between" style="width: 100%">
              <div>园区导入</div>
              <el-button size="mini" style="margin-left: 30px" @click="downloads('/garden/manage/ImportTemplate')">
                下载模板
              </el-button>
            </div>
            <UploadFile fileType=".xlsx" style="width: 100%" autoUpload @change="uploadChange($event, 0)" key="garden"/>
          </el-form-item>
          <div class="form-item-css"></div>
          <el-form-item label="企业导入" prop="videoUrl" class="form-item-css">
            <div slot="label" class="row-between" style="width: 100%">
              <div>企业导入</div>
              <el-button size="mini" style="margin-left: 30px" @click="downloads('/enterprise/manage/ImportTemplate')">
                下载模板
              </el-button>
            </div>
            <UploadFile fileType=".xlsx" style="width: 100%" autoUpload @change="uploadChange($event, 1)"
                        key="enterprise"/>
          </el-form-item>
        </div>
      </el-card>
    </el-form>

  </div>
</template>

<script>
  import request from '@/utils/request'

  export default {
    name: 'excelImport',
    data() {
      return {
        formData: {
          videoUrl: ''
        },
        formRules: {}
      }
    },
    methods: {
      async uploadChange(event, status) {
        const formData = new FormData
        formData.append('file', event.raw)
        const url = status ? '/enterprise/manage/importEnterprise' : '/garden/manage/importEnterprise'
        const res = await this.$ajax.post(url, formData)
        if (res.code != 200) return this.$message.warning(res.msg)
        this.$confirm(res.msg, { confirmButtonText: '确定', type: 'warning' })
      },
      downloads(url) {
        this.$confirm("是否确认下载模板吗?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(function () {
             return request({
              url: process.env.VUE_APP_BASE_API + url,
              method: 'get'
            });
          }).then((response) => {
            this.download(response.data);
          }).catch(function () {});
      }
    }
  }
</script>

<style scoped lang="scss">
  .card-view {
    width: 100%;
    .card-title {
      width: 200px;
      font-weight: bold;
      font-size: 18px;
      padding-bottom: 10px;
      margin-bottom: 20px;
      position: relative;
      &:before {
        content: "";
        width: 200px;
        height: 1px;
        background: #000000;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }

    .form-item-css {
      width: calc(100% / 3 - 10px);
      position: relative;
      .delete-but {
        position: absolute;
        color: red;
        z-index: 2;
        right: 0;
        top: -40px;
      }
    }
  }
</style>
